<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>交易记录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
</head>


<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-input-inline">
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" name="OrderNo" placeholder="请输入商户订单号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-input-inline">
                    <label class="layui-form-label">收支类型：</label>
                    <div class="layui-input-inline">
                        <select name="FinancialBalance">
                            <option value="-1">全部</option>
                            <option value="1">收入</option>
                            <option value="2">支出</option>
                        </select>
                    </div>
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-app-front-search"
                        id="btnSearch">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查找
                    </button>
                </div>
            </div>

            <div class="layui-card-body">
                <table id="datatable" lay-filter="datatable"></table>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    layui.config({
        base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    });

    layui.define(['index', 'layer', 'form', 'element', 'table', 'laydate'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var $ = layui.$;
        var admin = layui.admin;
        var setter = layui.setter;
        var laydate = layui.laydate;

        var controller = {
            data: {
                table: null,
                tableoptions: {},
                layerindex: 0,
                selectdata: {},
                ordertypelist:[],
                paytypelist:[],
                trademethodlist:[],
                FinancialBalanceList: [
                    { id: 1, text: "收入" },
                    { id: 2, text: "支出" },
                ],
                StatusList: [
                    { id: 1, text: "未完成" },
                    { id: 2, text: "完成" },
                    { id: 3, text: "失败" },
                ]
            },
            //初始化页面
            initpage: function () {
                var self=this;
                self.initevent();
                Promise.all([self.getDic("8330"), self.getDic("8331"), self.getDic("8332")]).then(res => {
                    self.data.ordertypelist = res[0].data.appbasedict;
                    self.data.paytypelist = res[1].data.appbasedict;
                    self.data.trademethodlist = res[2].data.appbasedict;
                    self.loaddata();
                }).catch(res => {
                    console.log(res.msg || res);
                })

            },
            getbaseurl: function (fun) {
                var url = "/lowcode/APP20210728142518705/wallet/?view=layui&fun=" + fun;
                return url;
            },
            //初始化事件
            initevent: function () {
                var self = this;
                //查找reload,通过条件，查询网格的table重载数据显示到界面
                form.on("submit(LAY-app-front-search)", function (data) {
                    self.loaddata();
                });
            },
            //加载订单列表
            loaddata: function () {
                var self = this;
                var date = $("#date").val() || "";
                self.data.table = table.render({
                    elem: '#datatable',
                    where: {
                        orderNo: $("[name='OrderNo']").val(),
                        financialBalance: $("[name='FinancialBalance']").val()
                    },
                    url: self.getbaseurl("Wallet.gettradelist"),
                    height: 'full-130',
                    cellMinWidth: 80,
                    size: 'sm',
                    page: true,
                    cols: [[
                        { width: "14%", field: 'OrderNo', title: '商户订单号' },
                        { width: "10%", field: 'AccountNo', title: '账号' },
                        { width: "8%", field: 'Name', title: '姓名' },
                        {
                            width: "8%", field: 'Amount', title: '金额', templet: function (d) {
                                return parseFloat((d.Amount || 0)).toFixed(2);
                            }
                        },
                        {
                            width: "8%", field: 'Balance', title: '账户金额', templet: function (d) {
                                return parseFloat((d.Balance || 0)).toFixed(2);
                            }
                        },
                        {
                            width: "8%", field: 'FinancialBalance', title: '收支', templet: function (d) {
                                var filter = self.data.FinancialBalanceList.filter(a => { return a.id == d.FinancialBalance });
                                if (filter != null && filter.length > 0)
                                    return filter[0].text;
                                else
                                    return '';
                            }
                        }, 
                        {
                            width: "10%", field: 'OrderType', title: '业务类型', templet: function (d) {
                                var filter = self.data.ordertypelist.filter(a => { return a.Code == d.OrderType });
                                if (filter != null && filter.length > 0)
                                    return filter[0].Name;
                                else
                                    return '';
                            }
                        },
                        {
                            width: "10%", field: 'PayType', title: '支付类型', templet: function (d) {
                                var filter = self.data.paytypelist.filter(a => { return a.Code == d.PayType });
                                if (filter != null && filter.length > 0)
                                    return filter[0].Name;
                                else
                                    return '';
                            }
                        },
                        {
                            width: "10%", field: 'TradeMethod', title: '交易类型', templet: function (d) {
                                var filter = self.data.trademethodlist.filter(a => { return a.Code == d.TradeMethod });
                                if (filter != null && filter.length > 0)
                                    return filter[0].Name;
                                else
                                    return '';
                            }
                        },
                        { width: "12%", field: 'ShareNo', title: '分润单号' },
                        {
                            width: "10%", field: 'TradeStatus', title: '状态', templet: function (d) {
                                var filter = self.data.StatusList.filter(a => { return a.id == d.TradeStatus });
                                if (filter != null && filter.length > 0)
                                    return filter[0].text;
                                else
                                    return '';
                            }
                        },
                        {
                            width: "10%", field: 'EndTime', title: '完成时间', templet: function (d) {
                                return (d.EndTime || "").substring(0, 19);
                            }
                        },
                        // { title: '操作', align: 'left', toolbar: '#operation', width: "28%", fixed: 'right' } 
                    ]]
                })
            },
            //获取支付类型字典 
            getDic: function (classId) {
                return new Promise((resolve, reject) => {
                    admin.req({
                        type: "get",
                        url: '/common/v1/BasicData/GetAppBaseDict',
                        data: {
                            classId: classId,
                            appKey: "APP20210728142518705"
                        },
                        done: function (res) {
                            resolve(res);
                        }
                    })
                })
            },
        }
        /*
        * 入口
        */
        controller.initpage();
    });

</script>